<!DOCTYPE html>
<html lang="en">
   <head>
      <title>three.js webgl - geometry - cube</title>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
      <style>
         body {
            margin: 0px;
            background-color: #ffffff;
            overflow: hidden;
         }
      </style>
   </head>
   <body>

      <script src="three.js/build/three.js"></script>

      <script>

         var camera, scene, renderer;
         var mesh;

         init();
         animate();

         function init() {

            camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
            camera.position.z = 400;

            scene = new THREE.Scene();

            var ambientLight = new THREE.AmbientLight( 0xcccccc, 0.35);
            this.scene.add( ambientLight );

            var pointLight = new THREE.PointLight( 0xffffff, 1.5, 0, 2 );
            pointLight.position.set( 00, 300, 0);
            scene.add(pointLight);

            var sz = 50;

            var geometry = new THREE.BoxGeometry(2000, 2000, 10);
            var material = new THREE.MeshBasicMaterial( {color: '#ffffff'} );
            mesh = new THREE.Mesh( geometry, material );
            mesh.position.z = -2*sz;
            scene.add( mesh );

            var geometry = new THREE.BoxGeometry(sz, sz, sz);
            var material = new THREE.MeshPhongMaterial( {color: '#ff0000'} );
            mesh1 = new THREE.Mesh( geometry, material );
            mesh1.position.y = -3*sz;
            scene.add( mesh1 );

            var geometry = new THREE.OctahedronGeometry(sz);
            var material = new THREE.MeshPhongMaterial( {color: '#00ff00'} );
            mesh2 = new THREE.Mesh( geometry, material );
            mesh2.position.y = 0;
            scene.add( mesh2 );

            var geometry = new THREE.IcosahedronGeometry(sz);
            var material = new THREE.MeshPhongMaterial( {color: '#0000ff'} );
            mesh3 = new THREE.Mesh( geometry, material );
            mesh3.position.y = 3*sz;
            scene.add( mesh3 );

            renderer = new THREE.WebGLRenderer( { antialias: true } );
            renderer.setPixelRatio( window.devicePixelRatio );
            renderer.setSize( window.innerWidth, window.innerHeight );
            document.body.appendChild( renderer.domElement );

            //

            window.addEventListener( 'resize', onWindowResize, false );

         }

         function onWindowResize() {

            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();

            renderer.setSize( window.innerWidth, window.innerHeight );

         }

         function animate() {

            requestAnimationFrame( animate );

            mesh1.rotation.x += 0.005;
            mesh1.rotation.y += 0.01;

            mesh2.rotation.x += 0.005;
            mesh2.rotation.y += 0.01;

            mesh3.rotation.x += 0.005;
            mesh3.rotation.y += 0.01;



            renderer.render( scene, camera );

         }

      </script>

   </body>
</html>

